<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Image Designer</title>
    <style type="text/css">
      html, body {
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

      .editor {
        width: 100%;
        height: 100%;
        display: flex;
      }

      .editor .left {
        width: 200px;
      }

      .editor .center {
        width: 0;
        flex: 1;
        background-color: #F0F1F2;
      }

      .editor .right {
        width: 200px;
      }
    </style>
    <script type="text/javascript" src="image-designer.js"></script>
  </head>
  <body>
    <div class="editor">
      <div class="left">
      </div>
      <div class="center" id="myCanvas"></div>
      <div class="right">
      </div>
    </div>
    <script type="text/javascript">
      var imageDesigner = new ImageDesigner("myCanvas")
      imageDesigner.open({
        pens: [
          {
            type: 'image', //类型 image text
            x: 0, //坐标
            y: 0,
            width: 200,
            height: 200,
            image: 'https://project-ali.oss-cn-beijing.aliyuncs.com/2023/10/24/tQsegeom0MRe9d8ffd98fa2f3ab4befa0769eab1b621_20231024150702A001.jpg', //图片路径
            flipX: false, //水平翻转
            flipY: false, //垂直翻转
          },
          {
            type: 'image',
            x: 1920 - 200,
            y: 1080 - 200,
            width: 200,
            height: 200,
            image: 'https://project-ali.oss-cn-beijing.aliyuncs.com/2023/10/24/tQsegeom0MRe9d8ffd98fa2f3ab4befa0769eab1b621_20231024150702A001.jpg',
          },
          {
            type: 'text',
            x: 100, //坐标 文本无尺寸，根据文本内容适应
            y: 100,
            text: '你好', //文本内容 换行符换行
            fontSize: 30, //文字大小
            color: 'red',  //文字颜色
            fontStyle: 'normal',  //文字风格
            lineHeight: 1.5,  //行高
            fontFamily: 'Arial',  //文字样式
          }
        ],
        backgroundImage: 'https://project-ali.oss-cn-beijing.aliyuncs.com/2023/10/24/ab.jpg',
      })
      imageDesigner.on("*", function(eventName, data) {
        console.log(eventName, data)
      })
    </script>
  </body>
</html>
